<template>
  <u-navbar auto-back :title="pageType === 'my' ? '我的名片' : cardInfo?.name + '的名片'" bgColor="#1676fd" title-style="color:#fff" left-icon-color="#fff"></u-navbar>
  <view class="header">
    <view class="bgBox"></view>
  </view>
  <view class="main">
    <view class="cardBox">
      <view class="topBox">
        <view class="nameBox">
          <view class="name">
            <text>{{ cardInfo?.name }}</text>
            <image class="hg" v-if="cardInfo?.level === '1'" src="../static/home/hg.png" mode="scaleToFill" />
            <view v-if="cardInfo?.authFlag === '1'" class="authLabel"><image src="../../../static/home/yrz.png" mode="scaleToFill" />已认证</view>
          </view>
          <view class="zw">{{ cardInfo?.job }}</view>
          <view class="gs">{{ cardInfo?.company }}</view>
        </view>
        <image :src="cardInfo?.avatar" class="headImg" mode="scaleToFill" />
      </view>
      <view class="desInfo">
        <view class="item">
          <view class="value" @click="goPhone">{{ cardInfo?.mobile }}</view>
          <view class="label">手机号（<text>交换名片可见</text>）</view>
        </view>
        <view class="item">
          <view class="value">{{ cardInfo?.city }}</view>
          <view class="label">常驻城市</view>
        </view>
        <view class="item" v-if="cardInfo?.email">
          <view class="value">{{ cardInfo?.email }} <text class="copy" @click="copy(cardInfo?.email)">复制</text></view>
          <view class="label">电子邮箱</view>
        </view>
        <view class="item" v-if="cardInfo?.wxId">
          <view class="value">{{ cardInfo?.wxId }} <text class="copy" @click="copy(cardInfo?.wxId)">复制</text></view>
          <view class="label">微信号</view>
        </view>
      </view>
    </view>
    <div class="box">
      <div class="skewed-container">
        <text class="left">人脉：{{ cardInfo?.contacts }}</text
        ><text class="right">热度：{{ cardInfo?.hot || 0 }}</text>
      </div>
      <div class="skewed-container2">信用：{{ cardInfo?.credit }}</div>
    </div>
    <CommonTitle title="名片信息" title-font-size="32rpx" />
  </view>
  <view class="mpInfoBox">
    <view class="item">
      <view class="left">性别</view>
      <view class="right">{{ cardInfo?.sex === "1" ? "男" : "女" }}</view>
    </view>
    <view class="newBox" v-for="(item, index) in cardInfo?.learnList" :key="index">
      <view class="first">
        <view class="left">{{ item.name }}</view>
        <view class="right">{{ item.startDate }} {{ item.endDate }}</view>
      </view>
      <view class="des">{{ item.major }} {{ item.education }}</view>
      <view class="des">{{ item.introduction }}</view>
    </view>
    <view class="newBox" v-for="(item, index) in cardInfo?.workList" :key="index">
      <view class="first">
        <view class="left">{{ item.name }}</view>
        <view class="right">{{ item.startDate }} {{ item.endDate }}</view>
      </view>
      <view class="des">{{ item.job }} </view>
      <view class="des">{{ item.introduction }}</view>
    </view>
  </view>
  <view class="empt"></view>
  <u-modal :show="showModal" title="验证消息" :showConfirmButton="false" @close="showModal = false" close-on-click-overlay>
    <view class="bigBox">
      <view class="textbox">
        <u-textarea maxlength="300" border="none" v-model="formData.reason" placeholder="请输入添加原因"></u-textarea>
      </view>
      <u-button type="primary" shape="circle" color="#1676FD" @click="submit">提交</u-button>
      <view
        class="concel"
        @click="
          showModal = false;
          formData.reason = '';
        "
        >取消</view
      >
    </view>
  </u-modal>
  <view class="buttomBox">
    <u-button type="primary" v-if="pageType === 'my'" plain shape="circle" @click="goEdit">完善信息</u-button>
    <u-button type="primary" v-if="pageType === 'my'" shape="circle">分享名片</u-button>
    <u-button type="primary" v-if="pageType !== 'my' && !isFriend" shape="circle" @click="jhpmFn">交换名片</u-button>
    <u-button type="primary" v-if="pageType !== 'my' && isFriend" shape="circle" @click="goPage(`/pages/message/chatPage?id=${cardInfo?.userId}&name=${cardInfo?.name}`)">去聊天</u-button>
  </view>
</template>

<script setup lang="ts">
import { getCardInfo } from "@/api/my";
import CommonTitle from "@/components/commonTitle.vue";
import { goPage } from "@/utils/commonFn";
import { onMounted, ref } from "vue";
import { useBCardStore } from "@/stores/bCard";
import { applyFriend, getCardMainInfo, getFriendStatus } from "@/api/order";

const { cardId, pageType } = defineProps<{
  cardId: string;
  pageType: string;
}>();
const showModal = ref(false);
const cardInfo = ref<myTypes.cardInfo>();
const formData = ref({
  userId: "",
  reason: "",
});
const isFriend = ref(false);
onMounted(async () => {
  let res: any;
  if (pageType === "my") {
    res = await getCardInfo({ id: cardId });
  } else {
    res = await getCardMainInfo({ id: cardId });
  }
  cardInfo.value = res.data;
  formData.value.userId = res.data.userId;
  const res1 = await getFriendStatus({ friendUserId: res.data.userId });
  isFriend.value = res1.data === "1";
});
const goEdit = () => {
  if (cardInfo.value) {
    useBCardStore().setEditCardInfo(cardInfo.value);
    goPage("/pages/myPage/MyBusinessCard/createBusinessCard");
  }
};
const jhpmFn = () => {
  const userInfo: myTypes.userInfo = uni.getStorageSync("userInfo");
  if (!userInfo.mobile) {
    uni.showModal({
      title: "提示",
      cancelText: "否",
      confirmText: "是",
      content: "您当前未登录，是否前往登录",
      success: function (res) {
        if (res.confirm) {
          goPage("/pages/myPage/login");
        }
      },
    });
    return;
  }
  if (userInfo.cardFlag == 0) {
    uni.showModal({
      title: "提示",
      cancelText: "否",
      confirmText: "是",
      content: "您当前还没有名片，是否前往创建",
      success: function (res) {
        if (res.confirm) {
          goPage("/pages/myPage/MyBusinessCard/createBusinessCard");
        }
      },
    });
    return;
  }
  if (userInfo.authFlag == "0") {
    uni.showModal({
      title: "提示",
      cancelText: "否",
      confirmText: "是",
      content: "您当前还未实名认证，是否前往",
      success: function (res) {
        if (res.confirm) {
          goPage("/pages/myPage/businessCardAuth");
        }
      },
    });
    return;
  }
  if (userInfo.level !== "1") {
    uni.showModal({
      title: "提示",
      cancelText: "否",
      confirmText: "是",
      content: "您未开通会员，是否前往",
      success: function (res) {
        if (res.confirm) {
          goPage("/pages/myPage/activateMembership");
        }
      },
    });
    return;
  }
  showModal.value = true;
};
const copy = (value: string) => {
  uni.setClipboardData({
    data: value,
    success: function (res) {
      uni.getClipboardData({
        success: function (res) {
          uni.showToast({
            title: "复制成功",
          });
        },
      });
    },
  });
};
const submit = async () => {
  if (!formData.value.reason) {
    uni.showToast({
      title: "请输入添加原因",
      icon: "none",
    });
    return;
  }
  await applyFriend(formData.value);
  uni.showToast({
    title: "已发送申请",
  });
  showModal.value = false;
};
const goPhone = () => {
  uni.makePhoneCall({
    phoneNumber: cardInfo.value?.mobile,
  });
};
</script>

<style lang="less" scoped>
.header {
  box-sizing: border-box;
  height: 464rpx;
  background: #1676fd;
  position: relative;
  z-index: -1;
  padding-top: 160rpx;
  .bgBox {
    width: 90%;
    height: 300rpx;
    background: #4390fd;
    border-radius: 32rpx;
    margin: 0 auto;
    margin-left: 15rpx;
    transform: rotate(-4deg);
  }
}
.main {
  margin-top: -332rpx;
  .cardBox {
    background: linear-gradient(135deg, #ffffff 0%, #f1f4ff 100%);
    border-radius: 32rpx 32rpx 0 0;
    padding: 0 48rpx;
    padding-top: 44rpx;
    padding-bottom: 32rpx;
    .topBox {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .headImg {
        width: 112rpx;
        height: 112rpx;
        border-radius: 50%;
        background: #917771;
      }
      .nameBox {
        .name {
          display: flex;
          align-items: center;
          text {
            font-size: 36rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            color: #1e1e1e;
            line-height: 50rpx;
          }
          .hg {
            width: 24rpx;
            height: 24rpx;
            margin-left: 10rpx;
          }
        }
        .zw {
          font-size: 24rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #bebebe;
          line-height: 46rpx;
          margin-top: 8rpx;
        }
        .gs {
          font-size: 24rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #bebebe;
          line-height: 46rpx;
        }
      }
    }
    .desInfo {
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 50%;
        margin-top: 32rpx;
        .value {
          font-size: 28rpx;
          font-family: DINPro, DINPro;
          font-weight: 400;
          color: #1e1e1e;
          line-height: 46rpx;
        }
        .label {
          font-size: 24rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #bebebe;
          line-height: 46rpx;
          text {
            color: #f94a15;
          }
        }
      }
    }
  }
  .box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    line-height: 88rpx;
    margin-bottom: 40rpx;
    .skewed-container {
      width: 72%;
      height: 88rpx;
      clip-path: polygon(93% 0%, 100% 100%, 0% 100%, 0% 0%);
      background: #1676fd;
      border-radius: 0 0 0 20px;
      margin-right: -10px;
      .left {
        margin-left: 56rpx;
      }
      .right {
        margin-left: 80rpx;
      }
    }
    .skewed-container2 {
      width: 30%;
      height: 88rpx;
      clip-path: polygon(100% 0%, 100% 100%, 15% 100%, 0% 0%);
      background: #84b5fe;
      border-radius: 0 0 20px 0;
      text-align: center;
      line-height: 88rpx;
    }
  }
}
.empt {
  margin-bottom: 200rpx;
}
.mpInfoBox {
  background: #ffffff;
  padding: 0 40rpx;

  .item {
    display: flex;
    padding: 36rpx 0;
    border-bottom: 1px solid #f8f8f8;
    .left {
      font-size: 30rpx;
      color: #bebebe;
      line-height: 42rpx;
      width: 120rpx;
    }
    .right {
      font-size: 30rpx;
      color: #1e1e1e;
      line-height: 42rpx;
    }
  }
  .newBox {
    padding: 36rpx 0;
    border-bottom: 1px solid #f8f8f8;
    .first {
      display: flex;
      justify-content: space-between;

      .left {
        font-size: 30rpx;
        color: #1e1e1e;
        line-height: 42rpx;
      }
      .right {
        font-size: 26rpx;
        font-family: DINPro, DINPro;
        color: #a8a8a8;
        line-height: 34rpx;
      }
    }
    .des {
      font-size: 26rpx;
      font-weight: 500;
      color: #a8a8a8;
      line-height: 36rpx;
      margin-top: 16rpx;
    }
  }
}
.buttomBox {
  display: flex;
  gap: 10px; /* 子元素之间的间距 */
}
.bigBox {
  width: 100%;
  .concel {
    text-align: center;
    font-size: 32rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #1676fd;
    line-height: 44rpx;
    margin-top: 32rpx;
  }
}
.textbox {
  width: 100%;
  margin-bottom: 32rpx;
}
.copy {
  color: #1676fd;
  margin-left: 7rpx;
}
/deep/ .u-textarea {
  background: #f5f7f9 !important;
}
</style>
